<template>
  <div class="account-list">
    <div class="w-flex-between">
      <el-radio-group size="small" v-model="userTypeSel">
        <el-radio-button label="ALL">所有</el-radio-button>
        <el-radio-button label="ADMIN">管理员</el-radio-button>
        <el-radio-button label="SUPER_ADMIN">超级管理员</el-radio-button>
      </el-radio-group>
      <div>
        <el-button size="small" type="primary" @click="addAccountClick">创建账号</el-button>
        <add-account ref="AddAccount" @reload="$refs.WPagination.reload()"/>
      </div>
    </div>
    <br />
    <el-table
      :data="dataArr"
      :cell-class-name="tabCellClassName"
      border
      style="width: 100%">
      <el-table-column
        label="姓名"
        width="180">
        <template slot-scope="scope">
          <span :class="{ 'current-account': scope.row.isCurrent }">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTimeStr"
        label="创建时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="typeStr"
        width="100"
        label="类型">
      </el-table-column>
      <el-table-column
        width="100"
        label="是否启用">
        <template slot-scope="scope">
          <el-switch
            v-if="!scope.row.isCurrent"
            v-model="scope.row.enabled"
            @change="enabledChange(scope.row)"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        prop="typeStr"
        label="项目列表">
        <template slot-scope="scope">
          <el-tooltip
            v-for="item in scope.row.articleModels"
            :disabled="item.status === 0"
            :key="item._id"
            effect="dark"
            placement="top"
            content="当前项目已删除"
          >
            <el-tag
              class="projext-tag"
              closable
              size="small"
              :type="item.status === 0 ? 'success' : 'danger'"
              @close="projectRemove(scope.row, item)">
              {{item.name}}
            </el-tag>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        width="200"
        label="操作">
        <template slot-scope="scope">
          <el-button v-if="!scope.row.isCurrent" class="opt-btn" type="text" @click="removeBtnClick(scope.row)">删除</el-button>
          <el-button v-if="!scope.row.isCurrent" class="opt-btn" type="text" @click="changePasswordClick(scope.row)">修改密码</el-button>
          <el-button v-if="!scope.row.isSuperAdmin" class="opt-btn" type="text" @click="addArticleClick(scope.row)">添加项目</el-button>
        </template>
      </el-table-column>
    </el-table>
    <w-pagination ref="WPagination" :total="total" @pageChange="reloadLoad"/>
    <change-password ref="ChangePassword"/>
    <add-article ref="AddArticle" @reload="$refs.WPagination.reload()"/>
  </div>
</template>

<script lang="ts">
  import { Vue, Component, Watch } from 'vue-property-decorator'
  import AddAccount from './com/addAccount/index.vue'
  import WPagination from '@/components/global/pagination/index.vue'
  import AccountModel from '@/models/AccountModel'
  import { PageDataType } from '@/models/types'
  import WPopView from '@/utils/popView'
  import ChangePassword from './com/changePassword/index.vue'
  import AddArticle from './com/addArticle/index.vue'
  import { AddAiticle as AddAiticleType } from './com/addArticle/types'
  import ArticleModel from '@/models/ArticleModel'

  @Component({
    name: 'AccountList',
    components: {
      AddArticle,
      AddAccount,
      WPagination,
      ChangePassword
    }
  })
  export default class AccountList extends Vue{

    dataArr: Array<AccountModel> = []
    total = 0

    userTypeSel = 'ALL'

    /**
     * 添加按钮点击
     */
    addAccountClick() {
      (this.$refs.AddAccount as any).show()
    }

    @Watch('userTypeSel')
    userTypeChange() {
      (this.$refs.WPagination as any).reload()
    }

    /**
     * 刷新数据
     */
    reloadLoad(pageData: PageDataType) {
      if (pageData.pageNum === 1) {
        this.dataArr = []
      }
      AccountModel.loadModels(pageData, {
        type: this.userTypeSel
      }).then((data: any) => {
        this.total = data.total
        this.dataArr = data.list
      })
    }
    /**
     * 是否可用点击
     */
    enabledChange(model: AccountModel) {
      model.accountEnabled().then(() => {
        WPopView.msgSuccess('修改成功');
      }).finally(() => {
        (this.$refs.WPagination as any).reload()
      })
    }
    /**
     * 删除按钮点击
     */
    removeBtnClick(model: AccountModel) {
      model.removeData(`确定要删除【${model.name}】这个账号吗？ `).then(() => {
        WPopView.msgSuccess('删除成功');
        (this.$refs.WPagination as any).reload()
      })
    }
    /**
     * 修改密码
     */
    changePasswordClick(model: AccountModel) {
      (this.$refs.ChangePassword as any).show(model)
    }

    /**
     * 添加项目
     */
    addArticleClick(model: AccountModel) {
      (this.$refs.AddArticle as AddAiticleType).show(model)
    }

    /**
     * 表格设置类
     */
    tabCellClassName({columnIndex}: { rowIndex: number; columnIndex: number }) {
      if (columnIndex === 4) {
        return 'project-cell'
      }
    }

    /**
     * 项目删除
     */
    projectRemove(userModel: AccountModel, projectModel: ArticleModel) {
      WPopView.confirm('删除提示！', `确定要删除 ${projectModel.name} 项目吗？`).then(() => {
        userModel.removeProject(projectModel._id).then(() => {
          WPopView.msgSuccess('删除成功');
          (this.$refs.WPagination as any).reload()
        })
      })
    }
  }

</script>

<style scoped lang="scss">
.account-list {
  .current-account {
    color: coral;
  }
  .projext-tag {
    margin: 5px;
  }
  .account-list {
    padding-top: 0;
  }
  .opt-btn {
    padding: 0;
  }
}
</style>

<style lang="scss">
  .account-list {
    .project-cell {
      padding: 0!important;
    }
  }
</style>
